<html>
<head>
<TITLE>Internal System</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="../css/style.css" type=text/css rel=stylesheet>
<script language="javascript" src="../js/Validation.js" type="text/JavaScript"></script>
<script type="text/javascript" src="../../js/tools/highslide/highslide-full.packed.js"></script>

<script type="text/javascript">
	hs.graphicsDir = '../../js/tools/highslide/graphics/';

	hs.showCredits = 0;
	hs.padToMinWidth = true;
	// ONLY FOR THIS EXAMPLE PAGE!
	// Initialize wrapper for rounded-white. The default wrapper (drop-shadow)
	// is initialized internally.
	if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {
		new hs.Outline('rounded-white');
		new hs.Outline('glossy-dark');
	});

	// The gallery example on the front page
	var galleryOptions = {
		slideshowGroup: 'gallery',
		wrapperClassName: 'dark',
		//outlineType: 'glossy-dark',
		dimmingOpacity: 0.95,
		align: 'center',
		transitions: ['expand', 'crossfade'],
		fadeInOut: true,
		wrapperClassName: 'borderless floating-caption',
		marginLeft: 100,
		marginBottom: 80,
		numberPosition: 'caption'
	};

	if (hs.addSlideshow) hs.addSlideshow({
	    slideshowGroup: 'gallery',
	    interval: 5000,
	    repeat: false,
	    useControls: true,
	    overlayOptions: {
	    	className: 'text-controls',
			position: 'bottom center',
			relativeTo: 'viewport',
			offsetY: -60
		},
		thumbstrip: {
			position: 'bottom center',
			mode: 'horizontal',
			relativeTo: 'viewport'
		}

	});
	hs.Expander.prototype.onInit = function() {
		hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;
	}

	// focus the name field
	hs.Expander.prototype.onAfterExpand = function() {

		if (this.a.id == 'contactAnchor') {
			var iframe = window.frames[this.iframe.name],
				doc = iframe.document;
	    	if (doc.getElementById("theForm")) {
	        	doc.getElementById("theForm").elements["name"].focus();
	    	}

		}
	}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="" enctype="multipart/form-data">
  <table width="100%" cellspacing="0" cellpadding="4">
    <tr bgcolor="#E4E4E4"> 
      <td colspan="3">Add Image of {$oContent->name}</td>
     </tr>
    
    <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
      <td align="right">Images:</td>
      <td colspan="2">
        &nbsp;<input name="image[]" type="file"  multiple="multiple" required="required" max=100>
        </td>
    </tr>
    
    <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
      <td align="right">Level:</td>
      <td colspan="2"> 
        &nbsp;<input name="level" id="level" type="text" value="10" size="10" maxlength="8">
        </td>
    </tr>

    <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
      <td align="right">Name:</td>
      <td colspan="2"> 
        &nbsp;<input name="name" id="name" type="text" value="{$name}" size="60" maxlength="100" required="required">
        </td>
    </tr>
    
    <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
      <td align="right">Tags:</td>
      <td colspan="2"> 
        &nbsp;<input name="tags" id="tags" type="text" value="{$tags}" size="60" maxlength="100">&nbsp; [ Sample: keyword1, keyword2 ]</td>
    </tr>
    
    
    <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
      <td height="23" align="right">Description:</td>
      <td height="23" colspan="2"><textarea name="description" id="descript" cols="80" rows="10">{$description}</textarea></td>
    </tr>  
       
    <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
      <td height="23" align="right">Status:</td>
      <td height="23" colspan="2">&nbsp;{html_radios name="status" options=$arrStatus checked=$status separator=" "}</td>
    </tr>
 
    <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'">
      <td height="23" width="17%">&nbsp;</td>
      <td width="83%" height="23" colspan="2">
        <input type="submit" name="Submit" value="Submit" onClick="return checkForm()">
        <input type="reset" name="Reset" value="Reset">
        <input name="menuGid" type="hidden" id="menuGid" value="{$menuGid}">
        <input name="menuid" type="hidden" id="menuid" value="{$menuid}">
        <input name="backurl" type="hidden" id="backurl" value="{$backurl}">
        <input name="id" type="hidden" id="id" value="{$id}"></td>
    </tr>
  </table>
</form>
<br><br>

<table width="1000" cellspacing="1" cellpadding="4" style="position:relative;z-index:1;">
  <tr bgcolor="#E4E4E4"> 
    <td width="100">Image</td>
    <td width="50">ID</td>
    <td width="50">Level</td>
    <td width="200">Name</td>
    <td width="100">Tags</td>   
    <td width="50">Width</td>
    <td width="50">Height</td>
    <td width="50">Size</td>
    <td width="50">E Name</td>
    <td width="100">Description</td>
    <td width="50">Status</td>
    <td width="100">Operation | <b><A href="listContent.php?menuGid={$menuGid}&menuid={$menuid}&id={$id}" target="_self">Back</A></b></td>
  </tr>
  <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
    <td colspan="10" align="center"><font color="#FF0000">{$error_message}</font></td>
  </tr>
  {foreach item=data from=$oImages}
  <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#E9EDED';" onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
    <td>&nbsp;
    	
	    <a href="../pic/thumbnail.php?type=content&width=0&height=0&fileName={$data->id}.{$data->extName}" class="highslide" {literal} onclick="return hs.expand(this, {wrapperClassName: 'wide-border', captionOverlay: { position: 'rightpanel'}})">{/literal}
	    	<img src="../pic/thumbnail.php?type=content&width=80&height=40&fileName={$data->id}.{$data->extName}" border="1" title="Click to enlarge">
	    </a>
		<div class='highslide-caption' style="position:relative;z-index:100; display:none; padding: 0 10px 10px 10;" >
			<h4>{$data->name}</h4>
	    	<p>{$data->description}</p>
		</div>

    </td>
    
    <td>{$data->id}</td>
    <td>{$data->level}</td>
    <td title="{$data->name}">{$data->name|truncate:15:"..."}</td>
    <td>{$data->tags}</td>
    <td>{$data->width}</td>
    <td>{$data->height}</td>
    <td>{$data->fileSize}</td>
    <td>{$data->extName}</td>
    <td title="{$data->descript}">{$data->description|truncate:35:"..."}</td>
    <td>
    	{if $data->status == 1}
    		Online
    	{else}
    		<font color="#FF0000">Offline</font>
    	{/if}
    </td>
    <td>
    	<a href="?menuGid={$menuGid}&menuid={$menuid}&act=delete&id={$id}&imageid={$data->id}" onClick="return validDefault.isConfirmOperate('You confirm to delete the image?')">Delete</a>
    	&nbsp;&nbsp;|&nbsp;&nbsp;
    	<a href="../pic/listPic_Edit.php?menuGid={$menuGid}&menuid={$menuid}&id={$data->id}">Edit</a>
    
    </td>
  </tr>
  {/foreach}
</table>
<table width="100%" cellspacing="0" cellpadding="4">
  <tr> 
    <td align="left" width="80%">{$PAGE_BAR}</td>
    <td align="center" width="20%"></td>
  </tr>
</table>





</body>
</html>